<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复诊记录</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="../../common/css/vant-index.css" />
    <link rel="stylesheet" href="../css/monitor.css">

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/axios.min.js"></script>
	<script src="../../base.js"></script>
    <script src="../../common/js/vue.global.prod.js"></script>
    <!-- 引入 viewer 图片预览样式文件 -->
    <link href="../../common/css/viewer.css" rel="stylesheet" />
    <style>
        .follow_time {
            margin-right: 0.5rem;
            font-size: 1.2rem;
            color: #464646;
        }

        .follow_organization {
            margin-top: 1.5rem;
            margin-bottom: 0.4rem;
        }

        .icon {
            display: inline-block;
            background-color: #E22E30;
            width: 0.5rem;
            height: 0.5rem;
            margin-left: 0.2rem;
            margin-bottom: 0.04rem;
        }

        .follow_process {
            margin-top: 0.5rem;
            margin-left: 0.5rem;
            color: #464646;
            font-size: 1.2rem;
        }

        .follow_step {
            margin-top: 1rem;
        }

        .follow_evaluate {
            margin-left: 1rem;
        }

        .visit_title {
            margin-top: 0.5rem;
            margin-left: 0.5rem;
        }

        .textcolor {
            color: #4a4b4d;
        }

        .divider {
            margin-top: 0.5rem;
            height: 0.5rem;
            background-color: #f5f5f5;
        }

        .follow_title {
            color: #464646;
            font-size: 1.2rem;
        }

        .follow_evaluate p {
            margin: 0.5rem 0;
        }
    </style>

</head>

<body>
    <div id="app" v-cloak>
        <van-nav-bar title="复诊记录" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
            <template #right>
                <van-icon name="wap-home-o" size='18' />
            </template>
        </van-nav-bar>
        <div>
            <div class="visit_title">
                <span class=" follow_time">复诊时间:{{dtime}}<van-tag color="#f3f3f3" text-color="gray" size="large">已复诊
                    </van-tag>
                </span>

                <p class="follow_organization textcolor">服务机构:{{org}}</p>
                <p class="textcolor">责任医师:{{dname}}</p>
            </div>
            <div class="divider"></div>

            <span class="follow_process">复诊流程:</span>
            <van-steps direction="vertical" :active="active">
                <van-step v-for="item in list.flupFLowItems" key="index">
                    <h3>{{item.projectName==null?'':item.projectName}}</h3>
                    <p class="follow_step">执行人:{{item.executor}}</p>
                </van-step>

            </van-steps>
            <div class="divider"></div>

            <div class="follow_evaluate">
                <van-panel>
                    <span class="follow_title">我的评价
                    </span>
                    <van-cell>
                        <template #title>
                            <div>
                                <p class="textcolor">总体服务:
                                    <van-rate v-model="value1" readonly :size="25" color="#ffd21e" void-icon="star"
                                        void-color="#eee" />
                                </p>
                            </div>
                        </template>
                    </van-cell>
                    <van-cell>
                        <template #title>
                            <div>
                                <p class="textcolor">使用设备:
                                    <van-rate v-model="value2" readonly :size="25" color="#ffd21e" void-icon="star"
                                        void-color="#eee" />
                                </p>
                            </div>
                        </template>
                    </van-cell>
                    <van-cell>
                        <template #title>
                            <div>
                                <p class="textcolor">环境舒适度:
                                    <van-rate v-model="value3" readonly :size="25" color="#ffd21e" void-icon="star"
                                        void-color="#eee" />
                                </p>
                            </div>
                        </template>
                    </van-cell>

                    <van-cell>
                        <template #title>
                            <div>
                                <p>其他建议:{{patientSuggest}}</p>
                            </div>
                        </template>
                    </van-cell>

                </van-panel>

            </div>

        </div>
    </div>
</body>
<!-- viewer 图片预览 -->
<script src="../../common/js/vant.min.js"></script>
<script src="../../common/js/viewer.js"></script>
<script src="../../common/js/index.umd.js"></script>
<script type="module">

    import {
        getAction,
        postAction,
        getUrl,
    } from "../../common/js/api/vue3-axios-utils.js";

    const app = Vue.createApp({

        data() {
            return {
                url: {
                    getfollowList: "/flup/patient/get",
                    getprocess: "/flup/flow"
                },

                show: false,
                totalPage: 0,
                columnsValue: '查询记录',
                nothing: 1,
                minDate: new Date(2020, 0, 1),
                maxDate: new Date(2025, 10, 1),
                currentDate: new Date(),
                list: [],
                period: 2,
                id: '',
                org: '',
                dname: '',
                dtime: '',
                active: '',
                value1: '',
                value2: '',
                patientSuggest: '',
                value3: '',

                date: '',
                loading: false,
                finished: false,
            }
        },
        methods: {
            getinfo() {
                this.id = localStorage.getItem("flupAppointmentId")
            },


            async getprocess() {
                let params = {
                    flupId: this.id
                };
                let url = getUrl() + this.url.getprocess;
                const res = await getAction(url, params);
                if (res.data.success) {
                    this.dtime = res.data.result.flupBasicInfo.flupDate
                    this.dname = res.data.result.flupBasicInfo.doctorName
                    this.org = res.data.result.flupBasicInfo.orgName
                    this.list = res.data.result
                    console.log(this.list);
                    for (let i = 0; i < res.data.result.flupFLowItems.length; i++) {
                        if (res.data.result.flupFLowItems[i].flag == false) {
                            this.active = i - 1
                            break
                        }

                    }
                }

            },
            async getfollowList() {


                let params = {
                    id: this.id
                };
                let url = getUrl() + this.url.getfollowList;
                const res = await getAction(url, params);
                if (res.data.success) {
                    this.patientSuggest = res.data.result.patientSuggest
                    this.value1 = res.data.result.patientEvaluationService
                    this.value2 = res.data.result.patientEvaluationEquipment
                    this.value3 = res.data.result.patientEvaluationComfort

                }
            },
            onClickLeft() {
                window.location.href = './followRecord.html'
            },
            onClickRight() {
                window.location.href = '../index.html?userid=' + localStorage.pid
            },
        },

        created() {
            this.getinfo()
            this.getprocess()
            this.getfollowList()

        },
    });
    app.use(vant);


    app.use(vant.Lazyload);
    app.use(VueViewer.default);

    app.mount('#app');
</script>

</html>